<template>
	<div class="role-container">
		<el-form class="el_form" style="display: flex; justify-content: flex-start; padding: 10px 10px 10px 0">
			<el-button type="primary" @click="openAdd">添加sku</el-button>
		</el-form>

		<el-table :data="tableData.data" style="width: 100%">
			<el-table-column prop="name" label="sku名称" align="center" />
			<el-table-column prop="stock" label="库存" align="center" />
			<el-table-column prop="image" label="图片" align="center">
				<template v-slot="scope">
					<el-image
						:src="scope.row.image"
						style="width: 80px; height: 80px"
						preview-teleported="true"
						:preview-src-list="[scope.row.image]"
					></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="presentPrice" label="现价" align="center" />
			<el-table-column prop="originalPrice" label="原价" align="center" />
			<el-table-column label="操作" align="center">
				<template v-slot="scope">
					<el-button type="text" @click="openEdit(scope.row, scope.$index)">编辑</el-button>
					<el-button type="text" @click="clickDelete(scope.row, scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<addSku
			:index="clickIndex"
			:dialogVisible="addVisible"
			:skuListAdd="skuListAdd"
			:row="clickItem"
			@submit="skuEditBack"
			@handleClose="handleClose"
			:isAdd="isAdd"
		></addSku>
	</div>
</template>

<script setup lang="ts" name="role">
import { onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { NextLoading } from '/@/utils/loading';
import addSku from './dialog/addSku.vue';

const labelVisible = ref(false);
const isAdd = ref(false);
const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});
const tableLoading = ref(false);
const queryFrom = ref({});
const addVisible = ref(false);

const skuListAdd = ref([]);
const skuListEdit = ref([]);
const skuListDelete = ref([]);

const clickItem = ref({});
const clickIndex = ref(0);

//0：添加 1：编辑 2：删除
const skuEditType = ref(0);

const props = defineProps({
	// 列表内容
	tableData: {
		type: Array,
		default: () => [],
	},
});

watch(
	() => props.tableData,
	(val) => {
		tableData.data = val;
	}
);

function openAdd() {
	skuEditType.value = 0;
	addVisible.value = true;
}

// 编辑
function openEdit(item, index) {
	skuEditType.value = 1;
	addVisible.value = true;
	clickItem.value = item;
	clickIndex.value = index;
	isAdd.value = false;
}

const emit = defineEmits(['getskuList']);

// 删除
function clickDelete(item, index) {
	ElMessageBox.confirm('是否要删除这条数据?', 'Warning', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		if (item.id) {
			skuListDelete.value.push(item.id);
			tableData.data.splice(index, 1);
			emit('getskuList', {
				skuListDelete: skuListDelete.value,
				skuListAdd: skuListAdd.value,
				skuListEdit: skuListEdit.value,
			});
		} else {
			// 从列表中删除
			tableData.data.splice(index, 1);
			// 还要从 addlist 中删除该数据
			skuListAdd.value = skuListAdd.value.filter((ele) => {
				return ele.uid !== item.uid;
			});
		}
	});
}
//添加、编辑sku返回
function skuEditBack(skuItem, clickIndex) {
	if (skuEditType.value == 0) {
		let item = {
			...skuItem,
			uid: `${Math.random() * 100}`,
			originalPrice: Math.ceil(skuItem.originalPrice * 100),
			presentPrice: Math.ceil(skuItem.presentPrice * 100),
			supplyPrice: Math.ceil(skuItem.supplyPrice * 100),
		};
		skuListAdd.value.push(item);
		tableData.data.push(item);
	} else if (skuEditType.value == 1) {
		// skuItem.originalPrice = Math.trunc(skuItem.originalPrice * 100);
		// skuItem.presentPrice = Math.trunc(skuItem.presentPrice * 100);

		if (skuItem.id) {
			skuListEdit.value.push({
				...skuItem,
				originalPrice: Math.ceil(skuItem.originalPrice * 100),
				presentPrice: Math.ceil(skuItem.presentPrice * 100),
				supplyPrice: Math.ceil(skuItem.supplyPrice * 100),
			});
			tableData.data[skuItem.clickIndex] = skuItem;
		} else {
			tableData.data[skuItem.clickIndex] = skuItem;
			skuListAdd.value = skuListAdd.value.map((ele) => {
				if (ele.uid === skuItem.uid) {
					return skuItem;
				}
				return ele;
			});
		}
	}
	emit('getskuList', {
		skuListDelete: skuListDelete.value,
		skuListAdd: skuListAdd.value,
		skuListEdit: skuListEdit.value,
	});
}
// onBeforeUnmount(() => {
// 	console.log('onBeforeUnmount')
// }),

function handleClose() {
	clickItem.value = null;
	addVisible.value = false;
}
</script>

<style scoped lang="scss">
@import url('/@/theme/page/page.scss');

.role-container {
	padding: 0 20px 20px 20px;
}
</style>
